<template lang="jade">

div.return-bar
	i.iconfont(@click="back()") &#xe668;
	帮助中心
div.faqs_page.detail_top
	div.top_com_type.cbox
		div.cl.type
			ul#newsmenu
				li(v-bind:class="{ 'on':type=='1' }", v-on:click="setType('1')") 新手指引
				//li(v-bind:class="{ 'on':type=='2' }", v-on:click="setType('2')") 自助服务
				//li(v-bind:class="{ 'on':type=='3' }", v-on:click="setType('3')") 模式解读
				li(v-bind:class="{ 'on':type=='4' }", v-on:click="setType('4')") 热点问题

	div.searchinput.cbox.nopos
		div.clx.input
			input(v-model="keywords", type="text",placeholder="输入问题, 例如:什么是红本抵押?")
			i.iconfont.zoom &#xe62b;
		div.clx
			button(@click="searchbyKW()") 搜索



	ul.s-menu( v-show="  type =='1' ", style="margin-top:0.2rem;")
		li(v-link="{ name: 'faqsDetail', params: { faqsId: 2330 } }")
			i.spot
			注册银行存管账户
			i.iconfont.se &#xe600;

		li(v-link="{ name: 'faqsDetail', params: { faqsId: 2331 } }")
			i.spot
			绑卡激活E账户
			i.iconfont.se &#xe600;

		li(v-link="{ name: 'faqsDetail', params: { faqsId: 2332 } }")
			i.spot
			充值
			i.iconfont.se &#xe600;

		li(v-link="{ name: 'faqsDetail', params: { faqsId: 3338 } }")
			i.spot
			投资
			i.iconfont.se &#xe600;
			
		li(v-link="{ name: 'faqsDetail', params: { faqsId: 2333 } }")
			i.spot
			提现
			i.iconfont.se &#xe600;


	ul.s-menu( v-show="  type =='2' " , style="margin-top:0.2rem;")
		li(v-link="{ path: '/invest'}")
			i.spot
			找回、修改登录密码
			i.iconfont.se &#xe600;

		li(v-link="{ path: '/invest'}")
			i.spot
			找回、修改华兴银行E账户
			i.iconfont.se &#xe600;

		li(v-link="{ path: '/invest'}")
			i.spot
			找回、修改交易密码
			i.iconfont.se &#xe600;

		li(v-link="{ path: '/invest'}")
			i.spot
			更换手机号码
			i.iconfont.se &#xe600;
			

 
	div(v-show=" type=='4' ", style="margin-top:0.2rem;")
		dl.ctbox
			dt 常见问题
			dd
				flexbox.flexbox
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3305 } }") 新手必读
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3320 } }") 收费标准


		dl.ctbox
			dt 资金问题
			dd
				flexbox.flexbox
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3316 } }") 银行存管常见问题
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3318 } }") 充值常见问题
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3327 } }") 提现常见问题



		dl.ctbox
			dt 投资问题
			dd
				flexbox.flexbox
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3308 } }") 投资常见问题
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3310 } }") 自动投标常见问题


		dl.ctbox
			dt 安全保障问题
			dd
				flexbox.flexbox
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3312 } }") 资金安全常见问题
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3328 } }") 车贷项目安全问题
					flexbox-item(v-link="{ name: 'faqsDetail', params: { faqsId: 3330 } }") 楼带项目常见问题




	ul.s-menu( v-show="  type =='5' " ,v-infinite-scroll="down()", style="margin-top:0.2rem;")
		li( v-for=" (index, item) in items ", v-link="{ name: 'faqsDetail', params: { faqsId: item.id } }" )
			i.spot
			{{item.title}}
			i.iconfont.se &#xe600;


</template>

<style>
@import '~vux/dist/vux.css';
</style>

<script>
import '../../assets/sass/index/index.scss'

import {c_faqs} from '../../config/api'
import {Flexbox, FlexboxItem} from 'vux'

export default{
  	
	data(){
		return{
			type:'1',
			keywords:'',
			items:[],
			page:1,
			busy:false
		}
	},
	components: {
		Flexbox,
		FlexboxItem
	},
	methods: {
	    back(){
	      window.history.back();
	    },
	    setType(key){
	    	this.type = key;
	    },
		down: function() {
			if(this.busy == true || this.items == ''){
			return false;
			} 

			this.busy = true;
			this.fetch(++this.page)
		},
		searchbyKW(){
			this.items = [];
			this.page = 1;
			this.fetch(1)
		},
	    fetch(page) {
	    	if(this.keywords=='') return false;
	    	this.type = '5';
			this.$http({url: c_faqs+'&page='+this.page+'&pid=41&search='+this.keywords, method: 'GET'}).then(function (response) {
				//this.items = response.data.data.list;
				this.items = this.items.concat(response.data.data.list);
				this.busy = false;
			});
	    }
	},
	route:{
		activate( transition ){
			transition.next();
		}
	}
}

</script>